<template>
  <div class="scanGoods">
    <Back>
    </Back>
    <div class="foods">
      <div class="head">
        <Mechine :mechine="mechine">
        </Mechine>
      </div>
      <div class="body">
        <div v-for="(item,index) in arrs" :key="index">
          <GoodsItem :item=item :index="index">
          </GoodsItem>
        </div>
      </div>
      <div style='height:200pt;'></div>
      <div class="foot">
        <!-- <div class="arrsInCar" v-for="(item2,index2) in arrs" :key="index2"> -->
        <div class="arrsInCar">
          <BayCar>
          </BayCar>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import Mechine from "@/components/scanGoods/Mechine.vue";
import GoodsItem from "@/components/scanGoods/GoodsItem.vue";
import BayCar from "@/components/scanGoods/BuyCar.vue";
import Back from "@/components/Back.vue";

import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      // arrs: [],
      mechine: {
        id: 12, //设备id
        name: "华侨大厦设备", //设备名字
        monthSale: 24, //月售
        distance: 125, // 距离多远 单位:m
        placeAddress: "皇姑区鸭绿江街123号", // 地址
        placeLongitude: "123.447559", //坐标
        placeLatitude: "41.823735" //坐标
      }
    };
  },
  computed: {
    ...mapState({
      arrs: state => {
        return state.goods.goodsData;
      }
    })
  },
  methods: {
    ...mapActions(["getData"])
  },
  mounted() {
    // 异步请求 馅饼的数据 数据
    let that = this;
    // this.$store.commit("getData", { id: 123 });
    this.$store.dispatch("myGetData", { id: 456 });
  },
  methods: {},
  components: {
    Back,
    Mechine,
    GoodsItem,
    BayCar
  }
};
</script>

<style scoped>
.body {
  background: #f1f1f1;
}
</style>
